/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-04-07 10:55:38
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-09-16 10:42:16
 */
import React, { useState, InputHTMLAttributes, CSSProperties } from "react";
import "./style.scss";
export interface BaseAreaProps {
  resize?: boolean;
  defaultValue?: string | "";
  placeholder?: string | "";
  onChange: (HTMLInputElement) => void;
  style?: CSSProperties;
  max?: number;
  value?: number;
  height?: number | string;
}

export type AnchorAreaProps = Partial<
  BaseAreaProps & InputHTMLAttributes<HTMLElement>
>;
export default (props: AnchorAreaProps) => {
  const { height = '300px', placeholder, defaultValue, resize, onChange } = props;

  return (
    <div
      className="viking-area"
      suppressContentEditableWarning
      style={{ minHeight: height, resize: resize ? "vertical" : "unset" }}
      onInput={(e) => {
        e.persist();
        onChange && onChange(e.target["innerText"]);
      }}
      contentEditable="true"
      placeholder={placeholder || ""}
    >
      {defaultValue || ""}
    </div>
  );
};
